<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
		<block>
			
			<view class="header">
				<view class="left" @tap="nearAddress">
					<!-- <image src="../../static/images/shop/icon_shop.png" mode=""></image> -->
				</view>
				<uni-search-bar @confirm="search"></uni-search-bar>
			</view>
			<view class="listBox">
				<view class="contener700">
					<view class="contentListBox">
						<!-- 左侧 滚动-->
						<scroll-view class="menu-wrapper" scroll-y :scroll-top="left_scroll"
							scroll-with-animation="true">
							<view class="left-content">
								<view style="position: relative;" v-for="(item,index) in leftList" :key="index"
									ref="menuList" @click="select(index)" :class="{'current': currentIndex == index}">
									<view class="menu-item">{{item.name}}</view>
									<text class="allcount"
										v-if="getAllCount>=item.count&&item.count>0">{{item.count}}</text>
								</view>
							</view>
						</scroll-view>
						<!-- 右侧滚动 -->
						<scroll-view class="foods-wrapper" scroll-y :scroll-top="foodSTop" @scroll="myscroll"
							:style="'height:'+windows_height+'px'" scroll-with-animation="true">
							<view ref="foodsWrapper">
								<view ref="foodList" class="foods" v-for="(item, i) in goods" :key="i">
									<view class="food-title" style="background: #f3f5f7">
										{{item.name}}
									</view>
									<view class="food" @tap="tzshopDetails(food)" v-for="(food, index) in item.foods"
										:key="index">
										<image :src="food.avatar" mode="aspectFill"
											style="width: 75px;height: 75px;margin-top: 6px;border: 2rpx solid #eee;">
										</image>
										<view class="food-info">
											<text class="line-clamp2" style="font-size: 25rpx;margin-top: 2px;">{{food.title}}</text>
											<text style="font-size: 22rpx;margin: 2px 0 4px;color: #999;">月售{{food.sale}}</text>
											<!-- 加减 -->
											<view class="food-btm">
												<text class="food-price">￥{{food.price}}</text>
												<cartcontrol :food="food" @add="addCart" @dec="decreaseCart">
												</cartcontrol>
											</view>
										</view>
									</view>
								</view>
							</view>
							<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
						</scroll-view>
					</view>
				</view>
			</view>
		</block>
		</skeleton>
	</view>

</template>

<script>
	import shopcart from '@/pageA/uni_modules/shopcart.vue';
	import cartcontrol from '@/components/cartcontrol.vue'
	import Vue from 'vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	export default {
		data() {
			return {
				title: 'Hello',
				ifBottomRefresh: false, //是否触底
				status: 'more',
				totalCount: 1,
				params: {
					pageNo: 1,
					pageSize: 10
				},
				leftList: [],
				rightList: [],
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				goods: [],
				windows_height: 0, //屏幕高度
				foodSTop: 0, //右侧的滑动值
				currentIndex: 0,
				last: 0,
				right_height: [], //右侧每个内容的高度集合
				select_index: 0,
				left_height: 0, //左侧总高度
				left_scroll: 0, //左侧滑动值
				catrgoryList: [],
				productList: [],
				timeout: null,
				
				loading: true,
				skeleton: [
					'circle-sm+line-lg',
					40,
					'square+line*3',
					'square+line*3',
					'square+line*3',
				], //骨架屏
			}

		},
		components: {
			shopcart,
			cartcontrol,
			Skeleton,
		},
		onLoad(e) {
			this.params.id = e.id
			console.log(e)
			this.windows_height = Number(uni.getSystemInfoSync().windowHeight);
			setTimeout(() => {
				this.getHeightList();
			}, 1000)
			this.getclassifyList()

			
		},
		//触底加载状态 
		onReachBottom() {
			console.log("asdasdsd")
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.ifBottomRefresh = true
				//正式服去掉这个延时器
				this.gethttplist();
			} else {
				this.status = "noMore"
			}
		},
		computed: {
			//获取列表
			getList() {
				let result = [];
				this.goods.forEach((good) => {
					good.foods.forEach((food) => {
						if (food.count) {
							result.push(food)
						}
					})
				})
				return result
			},

			// 获得购物车所有商品数量
			getAllCount: function(item) {
				let result = [];
				let count = 0;
				for (let i = 0; i < this.goods.length; i++) {
					count = 0;
					this.goods[i].foods.forEach((food) => {
						if (food.count >= 0) {
							count += food.count
							Vue.set(this.goods[i], 'count', count)
						}
					})
					result.push(count)
				}

				result.sort(function(a, b) {
					return a - b;
				})
				count = result[result.length - 1]
				return count;
			},
		},
		methods: {
			tzshopDetails(item) {
				let type = 1
				uni.navigateTo({
					url: `./shopDetails?id=${item.id}&type=${type}`
				})
			},
			//请求分类 
			getclassifyList() {
				this.$axios({
					url: "user/public/shop/categoryList",
					method: "post",
					data: {
						type: 2
					}
				}).then((res) => {
					// console.log('分类请求', res)
					res.result.forEach(item => {
						let obj = {
							"name": item.name,
							"foods": [],
							"id": item.id
						}
						this.leftList.push(obj)
						
					})
						this.gethttplist(this.params.id);
				})
			},
			//获取列表
			gethttplist() {
				this.$axios({
					url: "user/public/shop/list",
					method: "post",
					data: {
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						type: 1,
						id: this.params.id
					},
				}).then((res) => {
					if (res.result.pages >= this.params.pageNo) {
						this.params.pageNo++;
						if (this.ifBottomRefresh) {
							this.productList = this.productList.concat(res.result.list)
							this.leftList.map(item => {
								// item.id 
								res.result.list.map(productItem => {
									if (productItem.categoryId == item.id) {
										productItem.avatar = this.$reqConfig.URLIMAGE + productItem.avatar
										item.foods.push(productItem)
									}
								})
							})
						} else {
							this.productList = res.result.list
							this.leftList.map(item => {
								// item.id 
								this.productList.map(productItem => {
									// console.log(productItem)
									if (productItem.categoryId == item.id) {
										productItem.avatar = this.$reqConfig.URLIMAGE + productItem.avatar
										item.foods.push(productItem)
									}
								})
							})
							this.goods = this.leftList
						}
					} else {
						this.status = 'noMore'
					}
					// 骨架屏取消
					this.loading = false;
				})
			},

			//跳转购物车
			nearAddress() {
				uni.navigateTo({
					url: '../shop/shopcart'
				})
			},
			onClickItem(option) {
				this.current = option.currentIndex;
			},
			// 点击侧边栏
			select(index) {
				this.currentIndex = index;
				this.setScrollH(index);
			},
			// 设置点击侧边栏右边滚动的高度
			setScrollH: function(index) {
				var that = this;
				let height = 0;
				var query = uni.createSelectorQuery();
				let foods = query.selectAll('.foods');
				this.$nextTick(function() {
					foods.fields({
						size: true
					}, data => {
						if (index == 0) {
							that.foodSTop = 0;
						}
						for (let i = 0; i < index; i++) {
							height += parseInt(data[i].height);
							// console.log('fh', foods);
							that.foodSTop = height;
							// console.log(that.foodSTop)
						}
					}).exec();
				})

			},
			toAddCar(id, status) {
				//商家type为2
				this.$axios({
					url: `/user/usShopCar/add`,
					method: "post",
					data: {
						id,
						status,
						type: 2,
						merchantId: uni.getStorageSync("merchantId")
					}
				}).then((res) => {})
			},
			addCart: function(item) {
				console.log('加', item.id)
				let status = 1
				this.toAddCar(item.id, status)
				if (item.count >= 0) {
					item.count++
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							// 根据名字添加购物车,实际环境根据需要更改
							if (item.id == food.id) {
								food.count = item.count
								// this.catrgoryList.push(item)
								// console.log('列表',this.catrgoryList)
							}
						})
					})
				} else {
					console.log('add')
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.id == food.id)
								Vue.set(food, 'count', 1)
						})
					})
				}

			},
			decreaseCart(item) {
				console.log('减', item.id)
				let status = -1
				this.toAddCar(item.id, status)
				this.catrgoryList.push(item)
				console.log('列表', this.catrgoryList)
				if (item.count) {
					item.count--
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.id == food.id)
								food.count = item.count
						})
					})
				}
			},
			// 清空购物车
			getHeightList() {
				let _this = this;
				let selectorQuery = uni.createSelectorQuery().in(this);
				selectorQuery.select('.left-content').boundingClientRect(function(rects) {
					_this.left_height = rects.height;
				});
				selectorQuery.selectAll('.foods').boundingClientRect(function(rects) {
					_this.right_height = rects.map((item) => item.top);
				}).exec();
			},
			myscroll(e) {
				//引入节流	
				let right_content_height = e.detail.scrollHeight - this.windows_height;
				if (right_content_height == e.detail.scrollTop) {
					return;
				}
				let scroll_top = e.detail.scrollTop + 110; //110是banner图的高度
				//判断当前的scrollTop在哪个区间内;
				let now = +new Date();
				if (now - this.last > 100) {
					this.last = now;
					let active_index = this.right_height.findIndex((value, index, arr) => value <= scroll_top &&
						scroll_top < arr[index + 1]);
					this.currentIndex = active_index;
					if (this.left_height - this.windows_height) {//!!!!!!!!!!!!!!!!!!
						//如果有超出部分
						let diff = this.left_height - this.windows_height
						this.left_scroll = Math.round((active_index * diff) / (this.goods.length - 1))
					}
				}
			}
		}
	}
</script>
<style>
	.header {
		background-color: #fff;
		width: 750rpx;
	}

	.left {
		/* font-size: 26rpx; */
		float: left;
		height: 104rpx;
		line-height: 104px;
		color: #333;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
		position: relative;
	}

	.left image {
		width: 60upx;
		height: 60upx;
	}

	.banner {
		width: 750rpx;
		height: 230rpx;
		background-color: #FFf;
	}

	.banner view {
		height: 200rpx;
		width: 700rpx;
		margin: 0 auto;
		overflow: hidden;
		border-radius: 30rpx;
	}

	.banner image {
		width: 700rpx;
		height: 300rpx;
		border-radius: 30rpx;
	}

	.listBox {
		margin-top: 15rpx;
		width: 750rpx;
		height: calc(100vh - 360rpx);
		/* background-color: #fff; */
	}

	.contentListBox {
		display: flex;
		position: absolute;
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}

	.current {
		position: relative;
		z-index: 0;
		background-color: #fff;
		color: #3cc51f;
		border-left: 5px solid #3cc51f;
	}

	.menu-wrapper {
		text-align: center;
		width: 22%;
		display: flex;
		flex-direction: column;
		background: #f3f5f7;
		background-color: #fff;

	}

	.menu-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 50px;
	}

	.allcount {
		position: absolute;
		right: 6px;
		top: 8px;
		display: inline-block;
		padding: 0 4px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}

	.allcount2 {
		position: absolute;
		right: 0px;
		top: 10px;
		display: inline-block;
		padding: 0 4px;
		font-size: 9px;
		line-height: 16px;
		font-weight: 400;
		border-radius: 50%;
		background-color: #f01414;
		color: #ffffff;
	}

	.foods-wrapper {
		margin-left: 4px;
		width: 78%;
	}

	.food,
	.food-btm,
	.content {
		display: flex;
		flex-direction: row;
	}

	.food-title {
		padding: 2px 0;
	}

	.food-info {
		margin: 10px 16px;
		display: flex;
		flex-direction: column;
		flex: 2;
	}

	.food-btm {
		justify-content: space-between;
	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}
</style>
